import { WeekDayEnum } from "@/config/enum"
import moment from "moment"
import { useEffect, useState } from "react"
import { SizeTypesType } from ".."
import { getRealTimeWeather, getWeatherForDay } from './api'
import styles from './styles.module.less'

/**
 * 和风天气Api密钥
 */
export const hefengApiKey = '331a0d09df3b4aababd99943c32a4c43'

const Conm11 = () => {
  const [data, setData] = useState<any>({});

  const getData = async () => {
    try {
      const res = await getRealTimeWeather();
      setData(res?.now)
    } catch (error) {
    }
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div className={styles.Conm11}>
      <div>
        {data?.temp}℃
      </div>
      <div>
        {data?.text}
      </div>
    </div >
  )
}

const Conm12 = () => {
  const [data, setData] = useState<any>({});

  const getData = async () => {
    try {
      const res = await getRealTimeWeather();
      setData(res?.now)
    } catch (error) {
    }
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div className={styles.Conm12}>
      <div>
        {data?.temp}℃
      </div>
      <div>
        <div className="flex gap-1 justify-between">
          <span>
            {data?.text}
          </span>
          <i className={`qi-${data?.icon}`}></i>
        </div>
        <div className="flex gap-1">
          <div>
            风力
          </div>
          <div>
            {data?.windScale}
          </div>
        </div>
      </div>
    </div >
  )
}

const Conm21 = () => {
  const [data, setData] = useState<any>({});

  const getData = async () => {
    try {
      const res = await getRealTimeWeather();
      setData(res?.now)
    } catch (error) {
    }
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div className={styles.Conm21}>
      <div>
        {data?.temp}℃
      </div>
      <div>
        <div className="flex gap-1 justify-between">
          <span>
            {data?.text}
          </span>
          <i className={`qi-${data?.icon}`}></i>
        </div>
        <div className="flex gap-1">
          <div>
            风力
          </div>
          <div>
            {data?.windScale}
          </div>
        </div>
      </div>
    </div >
  )
}

const Conm22 = () => {
  const [data, setData] = useState<any>({});
  const getData = async () => {
    try {
      const res = await getRealTimeWeather();
      setData(res?.now)
    } catch (error) {

    }
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div className={styles.Conm22}>
      <div className="flex flex-col justify-center gap-2 items-center">
        <div className="text-3xl">
          <i className={`qi-${data?.icon}`}></i>
        </div>
        <div className="font-bold  text-xl">
          {data?.temp}℃
        </div>
      </div>
      <div className="grid grid-cols-2 grid-rows-2 text-xs gap-2 p-2 appNearBg">
        <div className="flex gap-1 flex-col max-sm:flex-row justify-between items-center">
          <div>
            天气
          </div>
          <div>
            {data?.text}
          </div>
        </div>
        <div className="flex gap-1 flex-col max-sm:flex-row justify-between items-center">
          <div>
            风力
          </div>
          <div>
            {data?.windScale}级
          </div>
        </div>
        <div className="flex gap-1 flex-col max-sm:flex-row justify-between items-center">
          <div>
            体感
          </div>
          <div>
            {data?.feelsLike}℃
          </div>
        </div>
        <div className="flex gap-1 flex-col max-sm:flex-row justify-between items-center">
          <div>
            湿度
          </div>
          <div>
            {data?.humidity}%
          </div>
        </div>
      </div>
    </div >
  )
}

const Conm24 = () => {
  const [data, setData] = useState<any>({});
  const [day7, setDay7] = useState<any>([]);

  const getData = async () => {
    try {
      const day = await getWeatherForDay(7);
      setDay7(day?.daily)
      const res = await getRealTimeWeather();
      setData(res?.now)
    } catch (error) {
    }
  }

  const weekday = moment().weekday()

  useEffect(() => {
    getData()
  }, [])

  return (
    <div className={styles.Conm24}>
      <div className="flex justify-between">
        <div className="flex flex-col justify-center flex-1 gap-2 items-center p-2">
          <div className="text-3xl">
            <i className={`qi-${data?.icon}`}></i>
          </div>
          <div className="font-bold text-3xl">
            {data?.temp}℃
          </div>
        </div>
        <div className="grid grid-cols-2 grid-rows-2 text-xs gap-1 p-2">
          <div className="flex gap-1 justify-between items-center appNearBg px-3 rounded py-1">
            <div>
              天气
            </div>
            <div>
              {data?.text}
            </div>
          </div>
          <div className="flex gap-1 justify-between items-center appNearBg px-3 rounded py-1">
            <div>
              风力
            </div>
            <div>
              {data?.windScale}
            </div>
          </div>
          <div className="flex gap-1 justify-between items-center appNearBg px-3 rounded py-1">
            <div>
              体感
            </div>
            <div>
              {data?.feelsLike}
            </div>
          </div>
          <div className="flex gap-1 justify-between items-center appNearBg px-3 rounded py-1">
            <div>
              湿度
            </div>
            <div>
              {data?.humidity}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-5 grid-rows-1 max-sm:text-xs p-2 appNearBg text-sm">
        <div className="flex flex-col justify-between items-center">
          <div>
            {WeekDayEnum[weekday]}
          </div>
          <div >
            <i className={`qi-${day7?.[0]?.iconDay}`}></i>
          </div>
          <div className="block max-sm:hidden">
            {day7?.[0]?.tempMax}/
            {day7?.[0]?.tempMin}
          </div>
        </div>
        <div className="flex flex-col justify-between items-center">
          <div>
            {WeekDayEnum[weekday + 1]}
          </div>
          <div >
            <i className={`qi-${day7?.[1]?.iconDay}`}></i>
          </div>
          <div className="block max-sm:hidden">
            {day7?.[1]?.tempMax}/
            {day7?.[1]?.tempMin}
          </div>
        </div>
        <div className="flex flex-col justify-between items-center">
          <div>
            {WeekDayEnum[weekday + 2]}
          </div>
          <div>
            <i className={`qi-${day7?.[2]?.iconDay}`}></i>
          </div>
          <div className="block max-sm:hidden">
            {day7?.[2]?.tempMax}/
            {day7?.[2]?.tempMin}
          </div>
        </div>
        <div className="flex flex-col justify-between items-center">
          <div>
            {WeekDayEnum[weekday + 3]}
          </div>
          <div >
            <i className={`qi-${day7?.[3]?.iconDay}`}></i>
          </div>
          <div className="block max-sm:hidden">
            {day7?.[3]?.tempMax}/
            {day7?.[3]?.tempMin}
          </div>
        </div>
        <div className="flex flex-col justify-between items-center">
          <div>
            {WeekDayEnum[weekday + 4]}
          </div>
          <div >
            <i className={`qi-${day7?.[4]?.iconDay}`}></i>
          </div>
          <div className="block max-sm:hidden">
            {day7?.[4]?.tempMax}/
            {day7?.[4]?.tempMin}
          </div>
        </div>
      </div>
    </div >
  )
}


export const sizeTypes: SizeTypesType = {
  '1-1': <Conm11 />,
  '1-2': <Conm12 />,
  '2-1': <Conm21 />,
  '2-2': <Conm22 />,
  '2-4': <Conm24 />,
}
